Canigó - Detall dels tags - tabPanel

Detall dels tags - tabPanel

Defineix un panel amb pestanyes. Cada una de les pestanyes contindrà l'equivalent a un formulari.

Estén el tag el tag ajax:tabPanel ( http://ajaxtags.sourceforge.net/usage.html ) de AjaxTags

La documentació auto-generada del tag és a http://canigo.ctti.gencat.net/confluence/canigodocs/site/canigo2_2/tlddoc/fwk/tabPanel.html

Atributs heredats

Els atributs heredats de ajax:tabPanel son: contentStyleId, currentStyleId, emptyFunction, errorFunction, panelStyleId, postFunction.

Atributs específics de Canigó

Atribut Funció
   

Serà necessari incloure una fulla d'estil que defineixi les propietats de presentació del panel, associades als tres estils definits pels atributs panelStyleId, contentStyleId i currentStyleId.

Exemple

A continuació es presenta un fragment de pàgina que utilitza el tag fwk:tabPanel

L'exemple crea un panel amb tres pestanyes. Els elements de les tres pestanyes formen part d'un unic form.

Els estils del panel de pestanyes estan definits en la fulla d'estil css/tabuladors.css.

Pàgina JSP

<%@ include file="/WEB-INF/jsp/includes/fwkTagLibs.jsp"%>

<link rel="Stylesheet"
      href="css/tabuladors.css"
      type="text/css"
      media="screen">

<fwk:form action="provesTagsComplex.do"
          styleId="myActionForm"
          key="jsp.provesTags.ProvesTagsSimple.form"
          reqCode="show"
          layout="false"
          method="post">
    <fwk:tabPanel panelStyleId="pestanas"
                  contentStyleId="tabContent"
                  currentStyleId="active">
        <fwk:tab captionKey="jsp.provesTags.ProvesTagsComplex.tab1"
                 defaultTab="true"
                 styleClass="contingut_tab"
                 linkStyleClass="pestanya1">

            <fwk:column>
                <fwk:checkbox styleId="camp3"
                              key="jsp.provesTags.ProvesTagsSimple.camp3"
                              mode="E,E,E"
                              tooltipTitleKey="jsp.provesTags.ProvesTagsSimple.camp3.tipTitle"
                              tooltipKey="jsp.provesTags.ProvesTagsSimple.camp3.tip"
                              property="camp3"/>

                <fwk:text key="jsp.provesTags.ProvesTagsSimple.camp1"
                          styleId="camp1"
                          mode="E,E,E"
                          mask="########-x"
                          maskType="text"
                          convertTo="uppercase"
                          tooltipTitleKey="jsp.provesTags.ProvesTagsSimple.camp1.tipTitle"
                          tooltipKey="jsp.provesTags.ProvesTagsSimple.camp1.tip"
                          tabindex="11"
                          property="camp1"/>

                (...)

                <fwk:submit key="jsp.provesTags.ProvesTagsSimple.boto1"
                            styleId="boto1"/>
            </fwk:column>
        </fwk:tab>
        <fwk:tab captionKey="jsp.provesTags.ProvesTagsComplex.tab2"
                 defaultTab="false"
                 styleClass="contingut_tab"
                 linkStyleClass="pestanya2">
            <br>&nbsp;segona pestanya&nbsp;<br>
        </fwk:tab>
        <fwk:tab captionKey="jsp.provesTags.ProvesTagsComplex.tab3"
                 defaultTab="false"
                 styleClass="contingut_tab"
                 linkStyleClass="pestanya3">
            <br>&nbsp;tercera pestanya&nbsp;<br>
        </fwk:tab>
    </fwk:tabPanel>
</fwk:form>
<br>&nbsp;<br>

Arxius d'internacionalització

jsp.provesTags.ProvesTagsComplex.tab1=Pestanya 1
jsp.provesTags.ProvesTagsComplex.tab2=Pestanya 2
jsp.provesTags.ProvesTagsComplex.tab3=Pestanya 3